html {

  font-size: calc(100vw/750*100);
}

body {}

.box {

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .top {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: center;

    input {
      width: 80%;
      height: .5rem;
      line-height: .5rem;
      text-align: center;
      margin-top: .1rem;
    }

  }

  main {

    display: flex;

    .left {

      width: 20%;
      height: 100%;
      border-right: 1px solid #eee;

      ul {
        list-style: none;
        margin: 0;
        padding: 0;

        .active {

          border-left: 2px solid red;
        }

        li {
          padding-top: .5rem;
          text-align: center;

        }
      }
    }

    .right {
      flex: 1;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      dl {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;

        dt {
          img {
            width: 3rem;
            height: 3rem;
          }
        }
      }
    }
  }
}
